<template>
  <div class="row6">
    <div class="box" id="当前黑名单企业总数">
      <!-- 这个盒子是用来放下拉选择框的 -->
      <div class="col_1 echarts" id="row6_col_1"></div>
    </div>
    <div class="box">
      <div class="col_2 echarts" id="row6_col_2"></div>
    </div>
    <div class="box">
      <div class="col_3 echarts" id="row6_col_3"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "row6",
   // 数据
  data() {
    return {

    }
  },
  // 页面加载就执行
  mounted() {
    this.getCol6_1(
      document.querySelector("#row6_col_1"),
      "6.1黑名单综合统计分析-漏斗图(家)"
    );
    this.getCol6_2(
      document.querySelector("#row6_col_2"),
      "6.2黑名单综合统计分析-市级折线图(家)"
    );
    this.getCol6_3(
      document.querySelector("#row6_col_3"),
      "6.3黑名单综合统计分析-行业折线图(家)"
    );
  },
  // 监听器 监听数据变化
  watch: {

  },
  // 方法
  methods: {
    // 6.1
    async getCol6_1(domName, title) {
      const {data: res} = await this.$http.get('http://172.16.1.170:8080/cxdsj/dsjAction.hmdzhSelect.do')
      // console.log('6.1', res);
      let str = res.substring(5)
      let hmdxy = eval("(" + str + ")")
      // console.log('6.1', hmdxy);
      const myChart = echarts.init(domName)
       var option = {
        title: {
          text: title,
          textStyle: {
            color: '#8fc4ff',
            fontsize: '20px',
            fontweight: 'bolder',
            fontStyle: 'normal'
          },
          top: '3%',
          left: 'center'
        },
        toolbox: {
      feature: {
        // saveAsImage: { show: true }, // 导出图片
        myFull: { // 全屏
          show: true,
          title: '全屏',
          icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
          onclick: () => {
            // 全屏查看
            if (domName.requestFullScreen) { // HTML W3C 提议
              domName.requestFullScreen()
            } else if (domName.msRequestFullscreen) { // IE11
              domName.msRequestFullScreen()
            } else if (domName.webkitRequestFullScreen) { // Webkit
              domName.webkitRequestFullScreen()
            } else if (domName.mozRequestFullScreen) { // Firefox
              domName.mozRequestFullScreen()
            }
            // 退出全屏
            if (domName.requestFullScreen) {
              document.exitFullscreen()
            } else if (domName.msRequestFullScreen) {
              document.msExitFullscreen()
            } else if (domName.webkitRequestFullScreen) {
              document.webkitCancelFullScreen()
            } else if (domName.mozRequestFullScreen) {
              document.mozCancelFullScreen()
            }
          }
        }
      }
        },
        tooltip: {
      trigger: 'item',
      // formatter: '{a} <br/>{b} : {c}%'
        },
        // legend: {
    //   orient: 'vertical',
    //   left: 'left',
    //   // data: ['Prod A', 'Prod B', 'Prod C', 'Prod D', 'Prod E']
    // },
        series: [
          {
        // name: 'Funnel',
        type: 'funnel',
        width: '60%',
        height: '80%',
        left: '10%',
        top: '20%',
        bottom: '5%',
        label: {
          fontSize: 13,
          color: '#ccc'
        },
        funnelAlign: 'left',
        // data: [
        //   { value: 40, name: '黑名单纳入总数' },
        //   { value: 38, name: '黑名单当前公告企业数' },
        //   { value: 32, name: '黑名单有效期内企业数' },
        //   { value: 30, name: '黑名单到期提醒企业数' },
        //   { value: 28, name: '黑名单过期企业数' },
        //   { value: 126, name: ' 黑名单移出总数' }
        // ]
        data:  hmdxy 
          },
        ]
      };
      // 3.把配置项给实例对象
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
    // 6.2
    async getCol6_2(domName, title){
      const {data: res}  = await this.$http.get('http://172.16.1.170:8080/cxdsj/dsjAction.hmdgsSelect.do')
      // console.log('6.2', res);
      let str = res.substring(5)
      let hmdxySj = eval("(" + str + ")")
      const myChart = echarts.init(domName)
      var option = {
        title: {
      text: title,
      textStyle: {
        color: '#ffffff',
        fontsize: '20px',
        fontweight: 'bolder',
        fontStyle: 'normal'
      },
      top: '3%',
      left: 'center'
        },
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00', '#3ba272'],
        toolbox: {
      feature: {
        // saveAsImage: { show: true }, // 导出图片
        myFull: { // 全屏
          show: true,
          title: '全屏',
          icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
          onclick: () => {
            // 全屏查看
            if (domName.requestFullScreen) { // HTML W3C 提议
              domName.requestFullScreen()
            } else if (domName.msRequestFullscreen) { // IE11
              domName.msRequestFullScreen()
            } else if (domName.webkitRequestFullScreen) { // Webkit
              domName.webkitRequestFullScreen()
            } else if (domName.mozRequestFullScreen) { // Firefox
              domName.mozRequestFullScreen()
            }
            // 退出全屏
            if (domName.requestFullScreen) {
              document.exitFullscreen()
            } else if (domName.msRequestFullScreen) {
              document.msExitFullscreen()
            } else if (domName.webkitRequestFullScreen) {
              document.webkitCancelFullScreen()
            } else if (domName.mozRequestFullScreen) {
              document.mozCancelFullScreen()
            }
          }
        }
      }
        },
        tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
        },
        legend: {
      top: '15%',
      type: 'plain',
      width: 'auto',
      height: 'auto',
      textStyle: {
        color: '#ccc',
        fontSize: 12
      }
    // data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5','Line 6']
        },
        grid: {
      top: '30%',
      left: '2%',
      right: '5%',
      bottom: '0%',
      containLabel: true
        },
        xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        // data: [
        //   '邯郸',
        //   '沧州',
        //   '石家庄',
        //   '唐山',
        //   '保定',
        //   '衡水',
        //   '邢台',
        //   '廊坊',
        //   '张家口',
        //   '承德',
        //   '雄安新区',
        //   '秦皇岛',
        //   '辛集',
        //   '定州'
        // ],
        data:  hmdxySj.map(item => {
          return item.city
        }),
        axisLine: {
          lineStyle: {
            color: '#ccc',
          }
        },
        axisLabel: {
          textStyle: {
            color: '#fff',
            fontSize: 11
          },
          interval: 0,
          rotate: -60,
        }
      }
        ],
        yAxis: [
      {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#ccc',
          }
        },
        // 刻度
        axisTick: {
          show: false,
        }
      }
        ],
        series: [
      {
        name: '纳入总数',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(128, 255, 165)'
            },
            {
              offset: 1,
              color: 'rgb(1, 191, 236)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        // data: [140, 232, 101, 264, 90, 340, 250, 120, 282, 111, 234, 220, 340, 310]
        data:  hmdxySj.map(item => {
          return item.nayuH
        }),
      },
      {
        name: '公告企业数',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(0, 221, 255)'
            },
            {
              offset: 1,
              color: 'rgb(77, 119, 255)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        // data: [120, 282, 111, 234, 220, 340, 310, 320, 132, 201, 334, 190, 130, 220]
        data:  hmdxySj.map(item => {
          return item.gonggaoH
        }),
      },
      {
        name: '有效期内企业数',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(55, 162, 255)'
            },
            {
              offset: 1,
              color: 'rgb(116, 21, 219)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        // data: [320, 132, 201, 334, 190, 130, 220, 220, 402, 231, 134, 190, 230, 120]
        data:  hmdxySj.map(item => {
          return item.youxiaoH
        }),
      },
      {
        name: '到期提醒企业数',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(255, 0, 135)'
            },
            {
              offset: 1,
              color: 'rgb(135, 0, 157)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        // data: [220, 402, 231, 134, 190, 230, 120, 220, 302, 181, 234, 210, 290, 150]
        data:  hmdxySj.map(item => {
          return item.daoqiH
        }),
      },
      {
        name: '过期企业数',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        label: {
          show: true,
          position: 'top'
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(255, 191, 0)'
            },
            {
              offset: 1,
              color: 'rgb(224, 62, 76)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        // data: [220, 302, 181, 234, 210, 290, 150, 140, 232, 101, 264, 90, 340, 250]
        data:  hmdxySj.map(item => {
          return item.guoqiH
        }),
      },
      {
        name: '移出总数',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(128, 255, 165)'
            },
            {
              offset: 1,
              color: 'rgb(1, 191, 236)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        // data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250]
        data:  hmdxySj.map(item => {
          return item.yichuH
        }),
      },
        ]
      };
      // 3.把配置项给实例对象
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
    // 6.3
    async getCol6_3(domName, title){
      const {data: res} = await this.$http('http://172.16.1.170:8080/cxdsj/dsjAction.hmdhySelect.do')
       // console.log('6.3', res);
      let str = res.substring(5)
      let hmdxyHy = eval("(" + str + ")")
      const myChart = echarts.init(domName)
      var option = {
        title: {
      text: title,
      textStyle: {
        color: '#8fc4ff',
        fontsize: '20px',
        fontweight: 'bolder',
        fontStyle: 'normal'
      },
      top: '3%',
      left: 'center'
        },
        toolbox: {
      feature: {
        // saveAsImage: { show: true }, // 导出图片
        myFull: { // 全屏
          show: true,
          title: '全屏',
          icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
          onclick: () => {
            // 全屏查看
            if (domName.requestFullScreen) { // HTML W3C 提议
              domName.requestFullScreen()
            } else if (domName.msRequestFullscreen) { // IE11
              domName.msRequestFullScreen()
            } else if (domName.webkitRequestFullScreen) { // Webkit
              domName.webkitRequestFullScreen()
            } else if (domName.mozRequestFullScreen) { // Firefox
              domName.mozRequestFullScreen()
            }
            // 退出全屏
            if (domName.requestFullScreen) {
              document.exitFullscreen()
            } else if (domName.msRequestFullScreen) {
              document.msExitFullscreen()
            } else if (domName.webkitRequestFullScreen) {
              document.webkitCancelFullScreen()
            } else if (domName.mozRequestFullScreen) {
              document.mozCancelFullScreen()
            }
          }
        }
      }
        },
        tooltip: {
      trigger: 'axis'
        },
        legend: {
      type: 'plain',
      top:'13%',
      right: '15%',
      textStyle: {
        color: '#ccc'
      }
        },
        grid: {
      top: '30%',
      left: '3%',
      right: '5%',
      bottom: '10%',
      containLabel: true
        },
        xAxis: {
      type: 'category',
      boundaryGap: false,
      // data: ['机械', '纺织', '煤矿', '危险化学品', '轻工', '石油天然气', '烟花爆竹', '有色', '烟草', '建材', '金属非金属矿山和尾矿库', '商贸', '冶金', '其他'],
      data: hmdxyHy.map(item => {
        return item.trad
      }),
      axisLabel: {
        rotate: '-10',
        textStyle: {
          color: '#fff',
        },
        interval: '0',
      },
      axisLine: {
        lineStyle: {
          color: '#ccc',
        }
      },
        },
        yAxis: {
      type: 'value',
      axisLabel: {
        textStyle: {
          color: '#fff',
        }
      },
      axisLine: {
        lineStyle: {
          color: '#ccc',
        }
      },
      axisTick: {
        show: false
      }
        },
        // 滚动条
        "dataZoom": [{
      "show": true,
      "height": 12,
      "xAxisIndex": [
        0
      ],
      bottom: '5%',
      "start": 0,
      "end": 40,
      handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
      handleSize: '110%',
      handleStyle: {
        color: "#d3dee5",

      },
      textStyle: {
        color: "#fff"
      },
      borderColor: "#90979c"
    }, {
      "type": "inside",
      "show": true,
      "height": 15,
      "start": 1,
      "end": 35
        }],
        series: [
      {
        name: '纳入总数',
        type: 'line',
        stack: 'Total',
        // data: [120, 132, 101, 134, 90, 230, 210, 150, 263, 145, 156, 230, 126, 189]
        data: hmdxyHy.map(item => {
          return item.nayuH
        }),
      },
      {
        name: '公告企业数',
        type: 'line',
        stack: 'Total',
        // data: [220, 282, 201, 234, 290, 430, 410, 120, 132, 101, 134, 90, 230, 210]
        data: hmdxyHy.map(item => {
          return item.gonggaoH
        }),
      },
      {
        name: '有效期内企业数',
        type: 'line',
        stack: 'Total',
        // data: [450, 432, 401, 454, 590, 530, 510, 220, 282, 201, 234, 290, 430, 410]
        data: hmdxyHy.map(item => {
          return item.youxiaoH
        }),
      },
      {
        name: '到期提醒企业数',
        type: 'line',
        stack: 'Total',
        // data: [120, 132, 101, 134, 90, 230, 210, 450, 432, 401, 454, 590, 530, 510]
        data: hmdxyHy.map(item => {
          return item.daoqiH
        }),
      },
      {
        name: '过期企业数',
        type: 'line',
        stack: 'Total',
        data: hmdxyHy.map(item => {
          return item.guoqiH
        }),
      },
      {
        name: '移出总数',
        type: 'line',
        stack: 'Total',
        // data: [450, 432, 401, 454, 590, 530, 510, 132, 101, 134, 90, 230, 210, 450]
        data: hmdxyHy.map(item => {
          return item.guoqiH
        }),
      }
        ]
      };
      // 3.把配置项给实例对象
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.row6 {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  height: 350px;
  .box {
    // flex: 3.5;
    position: relative;
    height: 100%;
    width: 30%;
    border: 1px solid #1480f0;
    &:nth-child(2) {
      width: 39%;
      border: 1px solid #1480f0;
    }

    & /deep/ .el-input__inner {
      background-color: transparent !important;
      max-width: 120px !important;
      max-height: 30px !important;
      color: #fff;
    }

    .echarts {
      position: relative;
      padding: 10px !important;
      height: 100%;
      width: 100%;

      // & /deep/ canvas {
      //   //background-color: #333;
      // }
    }

    &:nth-child(2n - 1) {
      border: 1px solid rgba(25, 186, 139, 0.17);
      background: #050d4b url(@/static/images/line_1.png);
      padding: 0 0.1875rem 0.1875rem;
      margin-bottom: 0.1875rem;
      flex-direction: column;
      justify-content: space-between;
    }
    &:first-child {
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;
        content: "";
      }
      &::after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }
    }
    &:last-child {
      &::before {
        position: absolute;
        top: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;
        content: "";
      }
      &::after {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }
    }
  }
}
</style>